<template>
  <div class="register-form">
    <a-form
      :model="formState"
      name="normal_login"
      class="login-form"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="Name"
        name="name"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.name"> </a-input>
      </a-form-item>
      <a-form-item
        label="Telephone"
        name="telephone"
        :rules="[
          {
            required: true,
            message: 'Please input your telephone!',
            max: 11,
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
          },
        ]"
      >
        <a-input v-model:value="formState.telephone"> </a-input>
      </a-form-item>
      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password">
        </a-input-password>
      </a-form-item>
      <div class="login-form-wrap">
        <a-form-item name="remember" no-style>
          <a-checkbox v-model:checked="formState.remember"
            >Remember me</a-checkbox
          >
        </a-form-item>
      </div>

      <a-form-item>
        <a-button
          :disabled="disabled"
          type="primary"
          html-type="submit"
          class="login-form-button"
        >
          Log in
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { defineComponent, reactive, computed, getCurrentInstance } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import {message} from "ant-design-vue"
export default defineComponent({
  name: "register",
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    const currentInstance = getCurrentInstance();
    const { $http, $message } = currentInstance.appContext.config.globalProperties;

    const formState = reactive({
      name: "",
      password: "",
      telephone: "",
      remember: true,
    });

    const onFinish = async (values) => {
      let newValue = values;
      delete newValue.remember;
      const {data, status} = await $http.post("register", { ...newValue });
      if (status) {
        $message.success(data.msg)
      }

    };

    const onFinishFailed = (errorInfo) => {
      console.log("Failed:", errorInfo);
    };

    const disabled = computed(() => {
      return !(formState.name && formState.password && formState.telephone);
    });
    return {
      formState,
      onFinish,
      onFinishFailed,
      disabled,
    };
  },
});
</script>
<style>
.register-form {
  margin: 0 auto;
  width: 600px;
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#components-form-demo-normal-login .login-form-forgot {
  margin-bottom: 24px;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>